<template>
    <v-container>
        <v-text-field color="primary" v-model="searchText" @keydown.enter="searchWord" 
        class="flex-full-width" append-inner-icon="mdi-magnify" label="搜索关英文单词" @click:append-inner="searchWord"/>
        <baidu-han-yu-word-view ref="searchView"/>
        <span v-if="word!=null&&word.source!=null" style="display: block;width: fit-content;margin: auto;color:grey;">数据来源：
            <strong style="color:rgb(var(--v-theme-primary));cursor: pointer;" @click="toggle(word.sourceUrl)">{{word.source}}</strong>
            <v-icon v-hasPermi="['read-word-refresh-admin']" v-if="word.sourceUrl!=null" @click="refreshWord" icon="mdi-refresh"/>
        </span>
    </v-container>
    <v-overlay :model-value="overlay" class="align-center justify-center">
        <v-progress-circular color="primary" indeterminate size="64"></v-progress-circular>
    </v-overlay>
    <v-snackbar v-model="snackbar">
        {{ snackbarMsg }}
    </v-snackbar>
    <i-frame-component ref="iframe"/>
</template>

<script>
import {searchEN} from '@/api/search'
import BaiduHanYuWordView from './SearchWordView.vue'
import IFrameComponent from '../components/IFrameComponent.vue';
import { refreshWord } from '@/api/word.js';

export default {
  components: { BaiduHanYuWordView,IFrameComponent },
    data() {
        return {
            searchText: '',
            searchHistory: [],
            overlay:false,
            snackbar:false,
            snackbarMsg:null,
            word:undefined
        }
    }, created() {
        // this.getHistory()
    },
    methods: {
        getHistory() {
        },
        refreshWord(){
            if(this.word.sourceUrl==null)return
            this.overlay=true
            refreshWord(this.word.wordId).then(resp=>{
                if(resp.data==null)return
                this.word = resp.data
                this.$refs.searchView.detail(resp.data)
            }).finally(()=>this.overlay=false)
        },
        searchWord() {
            this.overlay=true
            this.searchHistory.push(this.searchText)
            localStorage.setItem('en_history',JSON.stringify(this.searchHistory))
            searchEN({word:this.searchText}).then(resp=>{
                if(resp.data==null){
                    this.snackbarMsg='未找到数据'
                    this.snackbar=true
                    return
                }
                this.word=resp.data
                this.$refs.searchView.detail(resp.data)
            }).catch(err=>{
                this.snackbarMsg='错误：'+err
                this.snackbar=true
            }).finally(()=>this.overlay=false)
        },
        toggle(url){
            this.$refs.iframe.toggle(true,url)
        },
    }
}
</script>